<template>
<a-modal title="编辑成员" v-model:open="open" :confirm-loading="loading" @ok="handleOk" :width="420">
  <form-item label="用户名" :col="[5,18]">{{dataItem.username}}</form-item>
  <form-item label="角色" :col="[5,18]">
    <a-select name="role_id" class="width" v-model:value="form.role_id">
      <a-select-option v-for="item in roleStore.dataSource" :disabled="item.slug === 'owner'" :value="item.id">
        {{item.name}}
      </a-select-option>
    </a-select>
  </form-item>
  <form-item label="状态" :col="[5,18]">
    <a-radio-group name="status" v-model:value="form.status" button-style="solid">
      <a-radio-button :value="1">启用</a-radio-button>
      <a-radio-button :value="0">锁定</a-radio-button>
    </a-radio-group>
  </form-item>
</a-modal>
</template>

<script setup lang="ts">
import FormItem from "@/components/FormItem.vue";
import {useRoleStore} from "@/store/modules/organization/role.ts";
import {onMounted, type PropType, reactive, watch,ref} from "vue";
import {useMemberStore} from "@/store/modules/organization/member.ts";

const roleStore = useRoleStore()
const memberStore = useMemberStore()
const open = defineModel<boolean>('open', {default: false})
const loading = ref<boolean>(false)
const props = defineProps({
  dataItem: {
    type: Object as PropType<MemberListType>,
    default: ()=>({})
  }
})
const form = reactive({
  role_id: 0,
  status: 1
})
watch(()=>props.dataItem,()=>{
  Object.assign(form,props.dataItem)
})
const handleOk = async () => {
  try {
    loading.value = true
    const res:boolean = await memberStore.update(props.dataItem.id,form)
    if ( res){
      open.value = false
    }
  }catch{
    return  false
  }finally {
    setTimeout(()=>loading.value = false,3000)
  }
}
onMounted(()=>roleStore.getList())
</script>

<style scoped>

</style>